<template>
  <div class="op-container">
    <k-button class="top-btn" value="创建站内信" @click.native="openCreateEmailDialog" />
    <div v-show="false" class="top-right-btn">
      <k-button value="站内信类型配置" @click.native="emailTypeSettingDialog" />
    </div>
    <!--表格相关 -->
    <el-table
      :data="messageList"
      fit
      highlight-current-row
      style="width: 100%;border-radius:8px;"
      :header-cell-style="{background:'#F6F5FA',color:'#4E4F62'}"
    >
      <el-table-column type="index" label="序号" width="60px" align="center" />
      <el-table-column prop="secTypeName" min-width="200px" label="站内信类型" align="center" show-overflow-tooltip />
      <el-table-column prop="title" min-width="200px" label="主题" align="center" show-overflow-tooltip />
      <!-- <el-table-column prop="content" min-width="200px" label="内容" align="center" show-overflow-tooltip /> -->
      <el-table-column prop="creatorName" min-width="120px" label="创建人" align="center" show-overflow-tooltip />
      <el-table-column prop="crtTime" min-width="200px" label="创建时间" align="center" show-overflow-tooltip />
      <el-table-column min-width="120px" label="开关" align="center">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.status"
            active-color="#3b425d"
            inactive-color="#E9EBF2"
            active-text="开"
            inactive-text="关"
            :active-value="1"
            :inactive-value="0"
            @change="noticeState($event,scope)"
          />
        </template>
      </el-table-column>
      <el-table-column min-width="200px" label="操作" align="center">
        <template slot-scope="scope">
          <div class="op-div">
            <k-button class="table-btn" value="修改/详情" @click.native="updateMessageDialog(scope.row)" />
            <k-button class="table-btn" value="删除" @click.native="deleteMessage(scope.row.id)" />
          </div>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="totalRows > 0"
      :total="totalRows"
      :page.sync="listQuery.pager.pageNo"
      :limit.sync="listQuery.pager.pageSize"
      @pagination="loadData"
    />
    <!-- 创建站内信弹窗 -->
    <k-dialog
      :show-hide.sync="openCreateEmail.showHide"
      :modal-append-to-body="false"
      :append-to-body="true"
      title="创建站内信"
      class-name="openCreateEmail-dialog"
      :show-foot="false"
      :two-btn="true"
      @click="saveOrUpdateNotice"
    >
      <div class="dialog-openCreateEmail">
        <el-form :model="messageInfo" label-width="auto">
          <el-form-item label="站内信类型：">
            <el-select
              v-model="messageInfo.secType"
              placeholder="请选择站内信类型"
            >
              <el-option
                v-for="item in messageTypeList"
                :key="item.lineId"
                :label="item.lineName"
                :value="item.lineId"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="站内信主题：" prop="title">
            <el-input v-model="messageInfo.title" show-word-limit placeholder="请输入站内信主题" />
          </el-form-item>
          <el-form-item label="站内信内容：" prop="content">
            <quill-editor
              ref="myQuillEditor"
              v-model.trim="messageInfo.content"
              :options="editorOption"
              class="editer"
            />
          </el-form-item>
        </el-form>
      </div>
    </k-dialog>
    <!-- 站内信类型设置弹窗 -->
    <k-dialog
      :show-hide.sync="emailTypeSetting.showHide"
      :modal-append-to-body="false"
      :append-to-body="true"
      title="站内信类型配置"
      class-name="emailTypeSetting-dialog"
      :show-foot="false"
      :two-btn="true"
    >
      <div class="dialog-emailTypeSetting">
        <el-form :model="emailTypeSettingModel" label-width="auto" class="typesetting-item">
          <el-form-item
            v-for="(emailtype, index) in emailTypeSettingModel.types"
            :key="emailtype.key"
            label="站内信类型"
            prop="emailtype"
            :rules="{required: true, message: '域名不能为空', trigger: 'blur'}"
          >
            <el-input v-model="emailtype.value" />
            <i class="el-icon-remove" :style="{visibility:index == 0 && 'hidden'}" @click="removeEmailType(emailtype)" />
            <i class="el-icon-circle-plus" @click="addEmailType" />
          </el-form-item>
        </el-form>
      </div>
    </k-dialog>
  </div>
</template>
<script>
import { listData, update, save, updateStatus, deleteNotice, getTypeList } from '@/api/message/message'
import Pagination from '@/components/Pagination'
export default {
  components: { Pagination },
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'info',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  props: {
    type: {
      type: String,
      default: 'message'
    }
  },
  data() {
    return {
      messageTypeList: [],
      messageList: [],
      emailTypeSettingModel: {
        types: [{
          value: ''
        }],
        email: ''
      },
      dialogStatus: 'create',
      textMap: {
        update: '修改/详情',
        create: '创建站内信'
      },
      totalRows: 0, // 分页组件--数据总条数
      listQuery: {
        pager: {
          pageNo: 1,
          pageSize: 10,
          totalRows: '',
          start: ''
        },
        sort: '', // 排序字段 为对应列名,
        direction: '', // 排序 正向(asc)逆向(desc),
        type: 2 // 1公告 2站内信"
      },
      messageInfo: {
        id: undefined, // 主键id",
        title: '', // 标题",
        status: 0, // 开关0关1开",
        content: '', // 内容",
        type: 2, // 1公告2站内信",
        secType: undefined, // 站内信类型",
        secTypeName: '', // 站内信类型名称",
        creatorId: undefined, // 创建者id",
        crtTime: '', // 创建时间",
        updTime: '', // 修改时间",
        updateId: undefined // 修改人id"
      },
      editorOption: { //  富文本编辑器配置
        placeholder: '请输入内容',
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'], // 加粗，斜体，下划线，删除线
            ['blockquote', 'code-block'], // 引用，代码块
            [{ 'header': 1 }, { 'header': 2 }], // 标题，键值对的形式；1、2表示字体大小
            [{ 'list': 'ordered' }, { 'list': 'bullet' }], // 列表
            [{ 'script': 'sub' }, { 'script': 'super' }], // 上下标
            [{ 'indent': '-1' }, { 'indent': '+1' }], // 缩进
            [{ 'direction': 'rtl' }], // 文本方向
            [{ 'size': ['small', false, 'large', 'huge'] }], // 字体大小
            [{ 'header': [1, 2, 3, 4, 5, 6, false] }], // 几级标题
            [{ 'color': [] }, { 'background': [] }], // 字体颜色，字体背景颜色
            [{ 'font': [] }], // 字体
            [{ 'align': [] }], // 对齐方式
            ['clean'], // 清除字体样式
            ['image'] // 上传图片、上传视频
          ]
        }
      },
      email: {
        type: '',
        title: '',
        content: ''
      },
      openCreateEmail: {
        showHide: false
      },
      emailTypeSetting: {
        showHide: false
      }
    }
  },
  created() {
    this.loadData()
    this.getTypeList()
  },
  methods: {
    loadData() {
      listData(this.listQuery).then(res => {
        this.messageList = res.data.rows
        this.totalRows = res.data.totalRows
        this.$log(res)
      })
    },
    getTypeList() {
      getTypeList().then(res => {
        this.messageTypeList = res.data.data
      })
    },
    noticeState(event, scope) {
      const id = scope.row.id
      updateStatus({ 'noticeId': id, 'status': event }).then(res => {
        if (res.data.success) {
          this.$message.success('操作成功')
        } else {
          this.$message.error(res.data.msg)
          scope.row.status = event === 0 ? 1 : 0
        }
      })
    },
    // 保存 修改
    saveOrUpdateNotice() {
      if (this.dialogStatus === 'create') {
        this.messageInfo.type = 2
        save(this.messageInfo).then(res => {
          this.$log(res)
          if (res.data.success) {
            this.$message.success('保存成功')
            this.$resetForm(this.messageInfo)
            this.loadData()
          } else {
            this.$message.success(res.data.msg)
          }
        })
      } else {
        update(this.messageInfo).then(res => {
          if (res.data.success) {
            this.$message.success('修改成功')
            this.$resetForm(this.messageInfo)
            this.loadData()
          } else {
            this.$message.success(res.data.msg)
          }
        })
      }
      this.openCreateEmail.showHide = false
    },
    updateMessageDialog(row) {
      this.dialogStatus = 'update'
      this.openCreateEmail.showHide = true
      this.messageInfo.id = row.id // 主键id",
      this.messageInfo.title = row.title // 标题",
      this.messageInfo.status = row.status // 开关0关1开",
      this.messageInfo.content = row.content // 内容",
      this.messageInfo.type = row.type // 1公告2站内信",
      this.messageInfo.secType = row.secType // 站内信类型",
      this.messageInfo.secTypeName = row.secTypeName // 站内信类型名称",
      this.messageInfo.creatorId = row.creatorId // 创建者id",
      this.messageInfo.crtTime = row.crtTime// 创建时间",
      this.messageInfo.updTime = row.updTime// 修改时间",
      this.messageInfo.updateId = row.updateId // 修改人id"
    },
    deleteMessage(messageId) {
      this.$confirm('确定要删除该站内信么？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteNotice({ 'noticeId': messageId }).then(res => {
          if (res.data.success) {
            this.$message.success('操作成功')
            this.loadData()
          } else {
            this.$message.error(res.data.msg)
          }
        })
      }).catch(() => {

      })
    },
    removeEmailType(item) {
      var index = this.emailTypeSettingModel.types.indexOf(item)
      if (index !== -1) {
        this.emailTypeSettingModel.types.splice(index, 1)
      }
    },
    addEmailType() {
      this.emailTypeSettingModel.types.push({
        value: '',
        key: Date.now()
      })
    },

    openCreateEmailDialog() {
      this.$resetForm(this.messageInfo)
      this.dialogStatus = 'create'
      this.openCreateEmail.showHide = true
    },
    emailTypeSettingDialog() {
      this.emailTypeSetting.showHide = true
    }
  }
}
</script>
<style lang="scss" scoped>
$mainColor:#3b425d;// 主色调
$disabledColor: #909399; //禁用色
$hoverColor:#1D143C;// 鼠标停留主色调浅色

.op-container{
  margin: 20px;
}
.top-btn{
  margin: 10px 0px 30px 0px;
  font-size: 14px;
  color: #ffffff;
}
.top-right-btn{
  position: absolute;
  right: 20px;
  top: 30px;
  ::v-deep .el-button{
    background-color: #F8F7FB;
    border-color: transparent;
    color: #14162E;
    &:hover{
      color: #ffffff;
      background-color: $mainColor;
    }
    &:active{
      color: #14162E;
    }
  }
}
::v-deep .el-select .el-input.is-focus .el-input__inner {
    border-color: $mainColor;
}
::v-deep .el-input__inner:focus {
    border-color: $mainColor;
}
.editer{
  border-radius: 8px;
  float: left;
  box-sizing: border-box;
  color: #606266;
  ::v-deep .ql-container{
      height: 240px;
      border-radius: 0px 0px 8px 8px;
  }
  ::v-deep .ql-toolbar.ql-snow {
    border-radius: 8px 8px 0px 0px;
  }
}
.typesetting-item{
  ::v-deep .el-form-item__content{
    display:flex;
    flex-direction: row;
  }
  .el-icon{
    &-circle-plus, &-remove{
      font-size: 22px;
      color:#3b425d;
      display: flex;
      margin-left: 20px;
      flex-direction: column;
      justify-content: center;
   }
  }
}
</style>

